<html>
    <head>
        <title>test</title>
        <script src="jquery_1_9_1.js"></script>
        <script>
            $(document).ready(function() {
                var imgElement = $("#shakeSlide #itemList ul li");
                var imgWidth = imgElement.width();
                var imgHeight = imgElement.height();
                var imgCount = imgElement.size();
                var activeNumber = 2;
                $("#shakeSlide").css({height: activeNumber*imgHeight,width: imgWidth});
                $("#controlButton").click(function() {
                    $("#itemList ul li").first().fadeOut(500, function() {
                        $("#itemList ul li").last().after($("#itemList ul li").first());
                        $("#itemList ul li").first().animate({marginTop: imgHeight}, 0, function() {
                            $("#itemList ul li").first()
                                    .animate({marginTop: '-15px'}, 200)
                                    .animate({marginTop: '15px'}, 100)
                                    .animate({marginTop: '0px'}, 50);
                        });
                        $("#itemList ul li").last().fadeIn();
                    });
                });
            });
        </script>
        <style type="text/css">
            #shakeSlide{
                height: 110px;
                width: 110px;
                overflow: hidden;
                border: solid 1px black;
                position: relative;
            }
            #sliderList{
                height: 110px;
            }
            #itemList ul li{
                width: 312px;
                height: 213px;
                background-color: red;

            }
            #itemList ul{
                list-style-type: none;
                margin-top: 0px;
                margin-left: -40px;
            }
            #controlButton{
                background-color: green;
                width: 20px;
                height: 20px;
                bottom: 10%;
                left: 10%;
                position: absolute;
                z-index: 2;
            }
        </style>
    </head>
    <body>
        <div id="shakeSlide">
            <div id="itemList">
                <ul>
                    <li>img1</li>
                    <li>img2</li>
                    <li>img3</li>
                    <li>img4</li>
                    <li>img5</li>
                    <li>img6</li>
                    <li>img7</li>
                </ul>
            </div>
            <div id="controlButton">&nbsp;</div>
        </div>

    </body>
</html>